<button mat-icon-button class="opacity-80 hover:opacity-100 hover:scale-110 transition-transform duration-200"
  [matTooltip]="'PAC.KEY_WORDS.Tune' | translate: {Default: 'Tune'}"
  matTooltipPosition="right"
  [matMenuTriggerFor]="menus"
>
  <mat-icon fontSet="material-icons-round">tune</mat-icon>
</button>

<mat-menu #menus="matMenu" xPosition="after" yPosition="above">
  <button mat-menu-item [matMenuTriggerFor]="cacheMenu">
    <mat-icon fontSet="material-icons-round">layers_clear</mat-icon>
    {{ 'PAC.KEY_WORDS.CACHE' | translate: {Default: 'Cache'} }}
  </button>
  <button mat-menu-item [matMenuTriggerFor]="agentMenu">
    <mat-icon fontSet="material-icons-round">assistant_direction</mat-icon>
    {{ 'PAC.KEY_WORDS.DataAgent' | translate: {Default: 'Data Agent'} }}
  </button>
  <button mat-menu-item [matMenuTriggerFor]="wasmMenu">
    <mat-icon fontSet="material-icons-round"
        [color]="wasmAgentStatus()?.status === AgentStatusEnum.OFFLINE ? '' : 'success'">memory</mat-icon>
    {{ 'WASM' }}
  </button>
</mat-menu>

<mat-menu #cacheMenu="matMenu" class="ngm-menu-card">
  <div class="w-80 px-4 flex flex-col justify-start items-stretch overflow-hidden" (click)="$event.stopPropagation()">
    <h5 class="mb-2 text-lg font-bold tracking-tight">
      {{'PAC.KEY_WORDS.CACHE' | translate: {Default: 'Cache'} }}
    </h5>

    <div class="flex px-4">
      <mat-slider class="flex-1" color="accent" [max]="5" [min]="0" [step]="1" showTickMarks discrete 
        [displayWith]="cacheLevelFormatter">
        <input matSliderThumb [(ngModel)]="cacheLevel">
      </mat-slider>
    </div>

    <div class="flex justify-start">
      <div ngmButtonGroup displayDensity="cosy">
        <button mat-stroked-button displayDensity="cosy" (click)="clearCache()">
          {{'PAC.ACTIONS.CLEAR_CACHE' | translate: {Default: 'Clear Cache'} }}
        </button>
      </div>
    </div>
  </div>
  
</mat-menu>

<mat-menu #agentMenu="matMenu" class="ngm-menu-card">
  <div class="pac-status-bar__local-agent h-60" (click)="$event.stopPropagation()">
    <mat-tab-group mat-stretch-tabs fitInkBarToContent class="h-full">

      <mat-tab class="p-4" [label]=" 'PAC.KEY_WORDS.ServerAgent' | translate: {Default: 'Server Agent'} ">
        <div class="flex justify-between items-center">
          <span></span>
          <span>{{'PAC.KEY_WORDS.Progress' | translate: {Default: 'Progress'} }}: {{progress()}}%</span>
        </div>
        <mat-progress-bar class="w-full" [color]="progress() > 90 ? 'primary' : 'accent'" mode="buffer"
          [bufferValue]="90" [value]="progress()" />
        <div class="flex justify-between items-center">
          <span><span>{{'PAC.KEY_WORDS.Complete' | translate: {Default: 'Complete'} }}:</span> {{serverAgent.completeSize()}}</span>
          <span><span>{{'PAC.KEY_WORDS.Request' | translate: {Default: 'Request'} }}:</span>{{serverAgent.bufferSize()}}</span>
        </div>
      </mat-tab>

      @if (enableLocalAgent) {
        <mat-tab class="p-4" [label]=" 'PAC.MENU.LOCAL_AGENT' | translate: {Default: 'Local Agent'} ">
          <div>
            {{'PAC.KEY_WORDS.STATUS' | translate: {Default: 'Status'} }}: {{ localStatus()?.icon }} {{localStatus()?.status | translate}}
          </div>

          <div class="flex-1"></div>

          <div class="flex justify-start">
            <div ngmButtonGroup displayDensity="compact">
              <button mat-stroked-button displayDensity="compact" (click)="tryConnectLocalAgent()">
                {{ 'PAC.ACTIONS.Connect' | translate: {Default: 'Connect'} }}
              </button>
        
              <button mat-stroked-button displayDensity="compact" ngmAppearance="dashed">
                {{'PAC.ACTIONS.DOWNLOAD_AGENT' | translate}}
              </button>
            </div>
          </div>
        </mat-tab>
      }

      <mat-tab [label]=" 'PAC.MENU.Authentication' | translate: {Default: 'Authentication'} ">
        <mat-list role="list">
          @if (enableLocalAgent && localAgent) {
            @for (item of localAgent.auth() | keyvalue | filter: valueIsNotNil; track $index) {
              <mat-list-item role="listitem">
                <span>{{item.value[0]}}</span>
                <button mat-icon-button matListItemMeta displayDensity="compact" ngmAppearance="danger"
                  [matTooltip]=" 'PAC.MENU.STATUS_BAR.ClearAuthentication' | translate: {Default: 'Clear Authentication'} "
                  (click)="deleteAuth(localAgent, item.key)"><mat-icon>close</mat-icon></button>
              </mat-list-item>
            }
          }

          @for (item of serverAgent.auth() | keyvalue | filter: valueIsNotNil; track $index) {
            <mat-list-item role="listitem" >
              <span>{{item.value[0]}}</span>
              <button mat-icon-button matListItemMeta displayDensity="compact" ngmAppearance="danger"
                [matTooltip]=" 'PAC.MENU.STATUS_BAR.ClearAuthentication' | translate: {Default: 'Clear Authentication'} "
                (click)="deleteAuth(serverAgent, item.key)"><mat-icon>close</mat-icon></button>
            </mat-list-item>
          }
        </mat-list>
      </mat-tab>
    </mat-tab-group>
  </div>
</mat-menu>

<mat-menu #wasmMenu="matMenu" class="ngm-menu-card">
  <div class="pac-status-bar__local-agent w-60 h-60 px-4 flex flex-col" (click)="$event.stopPropagation()">
    <h5 class="mb-2 text-lg font-bold tracking-tight">
      {{ 'PAC.MENU.WASM_DB' | translate: {Default: 'WASM Database'} }}
    </h5>

    <div *ngIf="wasmStatus()" class="flex-1 flex flex-col overflow-auto">
      {{'PAC.KEY_WORDS.STATUS' | translate: {Default: 'Status'} }}: {{wasmStatus().icon}} {{wasmStatus().status | translate}}
    </div>
  </div>
</mat-menu>